<script setup lang="ts">
import { computed, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { Warning } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const route = useRoute();

const connectionId = computed(() => route.query.connectionId as string);
const connectionData = computed(() => ({
  id: (route.query.id as string) || '',
  ip: (route.query.ip as string) || '',
  port: parseInt(route.query.port as string) || 443,
  label: (route.query.label as string) || ''
}));

const handleConfirm = () => {
  if (window.api?.ipc?.send) {
    window.api.ipc.send('delete-connection-confirm', {
      connectionId: connectionId.value,
      data: connectionData.value
    });
  }
};

const handleCancel = () => {
  if (window.api?.ipc?.send) {
    window.api.ipc.send('delete-connection-cancel', connectionId.value);
  }
};

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    handleCancel();
  } else if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
    handleConfirm();
  }
};

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
});

onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleKeyDown);
});
</script>

<template>
  <div class="delete-connection-container">
    <div class="delete-connection-header">
      <h3>{{ $t('HOME_DELETE_CONNECTION') }}</h3>
    </div>
    <div class="delete-connection-content">
      <div class="delete-message">
        <p class="delete-title">
          {{
            $t('HOME_DELETE_CONNECTION_CONFIRM', {
              ip: connectionData.ip,
              port: connectionData.port
            })
          }}
        </p>
      </div>
    </div>
    <div class="delete-connection-footer">
      <el-button @click="handleCancel">{{ $t('COMMON_CANCEL') }}</el-button>
      <el-button type="danger" @click="handleConfirm">{{ $t('COMMON_DELETE') }}</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.delete-connection-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}

.delete-connection-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e4e7ed;

  h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #303133;
  }
}

.delete-connection-content {
  flex: 1;
  padding: 24px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  .delete-message {
    max-width: 100%;
    width: 100%;

    .delete-title {
      font-size: 15px;
      font-weight: 500;
      color: #303133;
      margin: 0 0 16px 0;
      line-height: 1.5;
    }
  }
}

.delete-connection-footer {
  padding: 12px 20px;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #fafafa;
}
</style>
